<!-- 会员中心 -->
<template>
  <div class="member-info">
    <van-nav-bar title="我的" />
    <!-- 会员信息 -->
    <div class="nickName-field">
      <img :src="headerImg" onerror="this.src='http://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/errorimg.png'" />
      <div class="name-tel">
        <span>用户名：{{userName}}</span>
        <span>电话：{{telephone}}</span>
      </div>
      <div v-show="!hasUserInfo" class="loginRegister-edit" @click="handleLoginAndRegister">登录/注册</div>
      <div v-show="hasUserInfo" class="personalInfo-edit">
        <span @click="handlePersonalInfo">个人信息<i class="iconfont icon-iconfontjiantou3"/></span>
        <span @click="handleLogOut">退出登录<i class="iconfont icon-tuichu"/></span>
        <span @click="handleWriteOff">注销用户<i class="iconfont icon-zhuxiaologout8"/></span>
      </div>
    </div>
    <div class="score-ticket">
      <div class="left-score-ticket">
        <router-link to="home">50积分</router-link>
      </div>
      <div>
        <router-link to="Coupons">2优惠券</router-link>
      </div>
    </div>
    <div class="divide-line" />
    <ActionSheet />
  </div>
</template>

<script>
import axios from 'axios';
import { Toast, Dialog } from 'vant';
import ActionSheet from '../component/ActionSheet';
import requestUrl from '../../serverApi';
export default {
  data () {
    return {
      userName: '--',
      telephone: '--',
      headerImg: '',
      hasUserInfo: false,
      userId: undefined,
    }
  },
  components: {ActionSheet},
  created() {
    const cookies = document.cookie;
    const userName = cookies && cookies.split('=')[1];
    if (cookies && userName) {
      this.hasUserInfo = true;
      this.userName = userName;
      this.getCurrentUser();
    }
  },
  methods: {
    handleLoginAndRegister() {
      // 登录/注册
      this.$router.push({name: 'Login'});
    },
    handlePersonalInfo() {
      // 个人信息
      this.$router.push({name: 'PersonalInfo'});
    },
    resetInfo() {
      localStorage.removeItem('userInfo');
      this.userName = '--';
      this.telephone = '--';
      this.hasUserInfo = false;
    },
    getCurrentUser() {
      const currentUserUrl = `${requestUrl.getCurrentUser}?userName=${this.userName}`
      axios.get(currentUserUrl).then((result) => {
        const data = result.data;
        if (data.code === 200 && data.message) {
          const userInfo = data.message;
          this.userName = userInfo.userName || '--';
          this.telephone = userInfo.telephone || '--';
          this.headerImg = userInfo.headerImg,
          this.userId = userInfo._id;
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    writeOffAction() {
      const writeOffUserUrl = `${requestUrl.writeOffUser}?userId=${this.userId}`;
      axios.delete(writeOffUserUrl, {
        withCredentials: true,
      }).then((res) => {
        const data = res.data;
        if (data.code === 200) {
          this.resetInfo();
        }
      }).catch(() => {
        // error
        Toast.fail(res.message);
      });
    },
    loginOut() {
      axios.get(requestUrl.loginOut, {
        withCredentials: true,
      }).then((result) => {
        const data = result.data;
        if (data.code === 200) {
          this.resetInfo();
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    handleLogOut() {
      Dialog.confirm({
        title: '提示',
        message: '确定退出登录?'
      }).then(() => {
        // 退出登录
        this.loginOut();
      });
    },
    handleWriteOff() {
      Dialog.confirm({
        title: '提示',
        message: '确定注销?'
      }).then(() => {
        // 注销用户
        this.writeOffAction();
      }).catch(() => {
        // onCancel
      });
    },
  },
}
</script>
<style scoped>
  .member-info {
    background-color: #fff;
  }
  .nickName-field {
    background-image: url('https://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/top_bg.jpeg');
    background-size: 100% 100%;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .nickName-field > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .name-tel {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }
  .loginRegister-edit,
  .personalInfo-edit {
    color: skyblue;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }
  .personalInfo-edit > span {
    line-height: 28px;
  }
  .personalInfo-edit i {
    font-size: 12px;
  }
  .score-ticket {
    display: flex;
    height: 50px;
    justify-content: space-around;
    align-items: center;
  }
  .score-ticket > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    flex: 1;
  }
  .left-score-ticket {
    border-right: 1px solid lightgray;
  }
  .divide-line {
    height: 5px;
    border-radius: 5px;
    width: 96%;
    margin: auto;
    background-color: lightgray;
  }
</style>
